<template>
	<div class="bBox">
		<div class="essBox">
			<span>项目名称</span>
			<div class="progressBox">{{ detail.name }}</div>
		</div>
		<div class="essBox" style="align-items: center;">
			<span>项目进度</span>
			<div class="progressBox">
				<el-slider
					:class="{ cls1: detail.status == 1, cls2: detail.status == 2, cls3: detail.status == 3, cls4: detail.status == 4, cls5: detail.status == 5 }"
					v-model="detail.progressRate"
					disabled
				/>
				<div style="font-weight: 600; width: 13%;" :style="{ color: detail.status ? qjzt[detail.status].color : '' }">{{ detail.progressRate }}%</div>
				<div class="ztbox">
					<div class="dian" :style="{ background: detail.status ? qjzt[detail.status].color : '' }"></div>
					<div style="font-size: 15px;font-weight: 600;" :style="{ color: detail.status ? qjzt[detail.status].color : '' }">
						{{ detail.status ? qjzt[detail.status].label : '' }}
					</div>
				</div>
			</div>
		</div>
		<div class="essBox jdb">
			<span>项目进展</span>
			<div class=" sjx">
				<el-timeline>
					<el-timeline-item v-for="(item, index) in progressList" :key="item[index]" :color="'#f14343'" :timestamp="item.createTime" placement="top">
						<span style="position: absolute;top:0px;left:22%;font-size: 14px;color: #999;">{{ item.createBy }}</span>
						<el-card>
							<p>{{ item.progressDescription }}</p>
						</el-card>
					</el-timeline-item>
				</el-timeline>
			</div>
		</div>
		<div v-if="detail.status == 2 || detail.status == 3 || detail.status == 4" style="display: flex;justify-content: center;" @click="editProgress()">
			<div class="bjan">编辑</div>
		</div>
		<el-dialog class="dialog" v-model="dialog" title="项目进度" top="30vh" width="20.5%">
			<el-form ref="ruleFormRef" :model="addForm" :rules="rules" label-width="83px" label-position="top">
				<el-form-item v-if="detail.principalId == userId" class="xyHeight" label="项目进展" prop="progressRate">
					<el-input style="width:100%;height: 40px; " v-model="addForm.progressRate" placeholder="0">
						<template #append>
							%
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="跟进记录:" prop="progressDescription"><el-input type="textarea" v-model="addForm.progressDescription" rows="3"></el-input></el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialog = false">取消</el-button>
					<el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { getProgressRateList, getProjectDetail,addProjectProgressRate } from '@/api/hkd';
import moment from 'moment';
import useUserStore from '@/store/modules/user';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
const ruleFormRef = ref<FormInstance>()
const { proxy } = getCurrentInstance();
var yzFloat = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('请输入项目预算'));
	} else {
		 // var re=;
		 const regMobile = /^(?:[1-9]?\d|100)$/
		if ((!regMobile.test(value))) {
			return callback(new Error('输入整数'));
		} else {
			callback();
			
		}
	}
};
const projectId = ref('');
const detail = ref({});
const progressList = ref({});
const userId = ref(useUserStore().userId);
const data = reactive({
	addForm: {},
	rules: {
		progressRate: [{ required: true, message: '请输入项目进度', trigger: 'change' }, { validator: yzFloat, trigger: 'change' }],
		progressDescription: [{ required: true, message: '请输入项目进展', trigger: 'change' }]
	}
});
const { addForm, rules } = toRefs(data);
const dialog = ref(false);
const qjzt = ref({
	1: { color: '#999999FF', label: '未启动' },
	2: { color: '#1AC45FFF', label: '进行中' },
	3: { color: '#FA6400', label: '已暂停' },
	4: { color: '#BE1A21FF', label: '待验收' },
	5: { color: '#000000', label: '已完成' }
});
onMounted(() => {
	if (proxy.$route.query) {
		projectId.value = proxy.$route.query.projectId;
		getProgress();
	}
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		let form = JSON.parse(JSON.stringify(addForm.value ))
		form.projectId = projectId.value
			addProjectProgressRate(form).then(res=>{
				if(res.code =='200'){
					   ElMessage({ message: '编辑成功！', type: 'success', duration: 1 * 1000 })
					   getProgress();
					   dialog.value = false
				}else{
					ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
				}
			})
    } else {
    }
  })
}
function getProgress() {
	getProgressRateList({
		projectId: projectId.value
	}).then(res => {
		if (res.code === 200) {
			progressList.value = res.rows;
		} else {
			ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 });
		}
	});
	getProjectDetail({
		projectId: projectId.value
	}).then(res => {
		if (res.code === 200) {
			detail.value = res.data;

			addForm.value.progressRate = res.data.progressRate;
		} else {
			ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 });
		}
	});
}
function editProgress() {
	dialog.value = true;
}
</script>

<style scoped lang="scss">
.bBox {
	padding: 50px 200px;
	width: 100%;
	height: 100%;
}

:deep(.essBox)  {
	display: flex;
	// align-items: center;
	span {
		color: #999999ff;
	}
	margin-bottom: 20px;
	.progressBox {
		color: #000000ff;
		font-weight: 600;
		width: 40%;
		margin-left: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.el-slider {
		width: 72%;
		height: 32px;
		display: flex;
		align-items: center;
	}
	.cls1 {
		.el-slider__runway.is-disabled .el-slider__button {
			border-color: #999999ff !important;
		}
		.el-slider__runway.is-disabled .el-slider__bar {
			background-color: #999999ff !important;
		}
	}
	.cls2 {
		.el-slider__runway.is-disabled .el-slider__button {
			border-color: #1ac45fff !important;
		}
		.el-slider__runway.is-disabled .el-slider__bar {
			background-color: #1ac45fff !important;
		}
	}
	.cls3 {
		.el-slider__runway.is-disabled .el-slider__button {
			border-color: #fa6400 !important;
		}
		.el-slider__runway.is-disabled .el-slider__bar {
			background-color: #fa6400 !important;
		}
	}
	.cls4 {
		.el-slider__runway.is-disabled .el-slider__button {
			border-color: #be1a21ff !important;
		}
		.el-slider__runway.is-disabled .el-slider__bar {
			background-color: #be1a21ff !important;
		}
	}
	.cls5 {
		.el-slider__runway.is-disabled .el-slider__button {
			border-color: #000000 !important;
		}
		.el-slider__runway.is-disabled .el-slider__bar {
			background-color: #000000 !important;
		}
	}
}

.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 4px;
		height: 4px;
		border-radius: 50%;
	}
}
:deep(.sjx)  {
	max-height: 470px;
	// min-height: 45vh;
	margin-left: 60px;
	overflow: auto;
	background: #cdcdcd21;
	padding: 20px 0px;
	border-radius: 10px;
	width: 75% !important;
	.el-timeline {
		width: 95%;
		.el-card {
			background-color: #f3f3f3ff;
		}
		.el-card__body {
			padding: 0 20px !important;
		}
		.el-timeline-item__tail {
			border: 1px dashed #1cc264ff;
			left: 4px;
			top: 23px;
			height: 72%;
		}
		.el-timeline-item__node--normal {
			background: url(../../assets/images/mainImg/time.png) no-repeat;
			background-size: contain;
			width: 20px;
			height: 20px;
			left: -5px;
			background-color: transparent !important;
		}
	}
}
.sjx::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.jdb {
	margin-top: 40px;
}
.bjan {
	margin-top: 20px;
	cursor: pointer;
	padding: 8px 14px;
	background: #ffdade;
	color: #be1a21ff;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
}
</style>
